<template>
  <div id="app">
    <h3>选择城市</h3>
    <div class="form-group" style="display: flex">
      <select
        v-model="selectedProvince"
        class="form-control"
        @change="fetchCityData"
      >
        <option
          v-for="province in provinces"
          :key="province.adcode"
          :value="province.name"
        >
          {{ province.name }}
        </option>
      </select>
      <select
        v-model="selectedCity"
        class="form-control"
        @change="fetchAreaData"
      >
        <option v-for="city in cities" :key="city.adcode" :value="city.name">
          {{ city.name }}
        </option>
      </select>
      <select
        v-model="selectedArea"
        class="form-control"
        @change="getWeatherData"
      >
        <option v-for="area in areas" :key="area.adcode" :value="area.name">
          {{ area.name }}
        </option>
      </select>
    </div>
    <!-- xx地区的显示 -->
    <h3>
      <strong id="provinceData" style="color: rgb(26, 127, 190)">{{
        selectedProvince
      }}</strong>
      <strong id="cityData" style="color: rgb(26, 127, 190)">{{
        selectedCity
      }}</strong>
      <strong id="areaData" style="color: rgb(26, 127, 190)">{{
        selectedArea
      }}</strong>
      <span>未来七日天气预报</span>
    </h3>
    <!-- 天气表格 -->
    <table class="table table-striped table-bordered">
      <thead>
        <tr class="info">
          <th>日期</th>
          <th>白天天气</th>
          <th>白天风向</th>
          <th>白天风力</th>
          <th>夜晚天气</th>
          <th>夜晚风向</th>
          <th>夜晚风力</th>
          <th>最高温度</th>
          <th>最低温度</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in weatherData" :key="index">
          <td>{{ item.time }}</td>
          <td>{{ item.day_weather }}</td>
          <td>{{ item.day_wind_direction }}</td>
          <td>{{ item.day_wind_power }}</td>
          <td>{{ item.night_weather }}</td>
          <td>{{ item.night_wind_direction }}</td>
          <td>{{ item.night_wind_power }}</td>
          <td>{{ item.max_degree }}</td>
          <td>{{ item.min_degree }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import "@/assets/bootstrap.css";
import { ref, onMounted } from "vue";
import axios from "axios";

const provinceData = ref([]);
const cityData = ref([]);
const areaData = ref([]);
const weatherData = ref([]);
const selectedProvince = ref("");
const selectedCity = ref("");
const selectedArea = ref("");

// 渲染下拉数据的函数
function renderOption(data, list) {
  data.forEach((item) => {
    const option = { text: item.name, value: item.name };
    list.push(option);
  });
}

// 获取地区数据
async function fetchDistrictData(keywords) {
  const response = await axios.get(
    "https://restapi.amap.com/v3/config/district",
    {
      params: {
        keywords,
        key: "a321f609de73d8e07ba4505d0d8e00a3",
        subdistrict: 0, // 根据需要设置参数
      },
    }
  );
  return response.data?.districts?.[0]?.districts || [];
}

// 渲染表格结构
function renderTable(data) {
  weatherData.value = data.map((item) => ({
    time: item.time,
    day_weather: item.day_weather,
    day_wind_direction: item.day_wind_direction,
    day_wind_power: item.day_wind_power,
    night_weather: item.night_weather,
    night_wind_direction: item.night_wind_direction,
    night_wind_power: item.night_wind_power,
    max_degree: item.max_degree,
    min_degree: item.min_degree,
  }));
}

// 获取天气
async function getWeather(province, city, county) {
  const response = await axios.get("http://localhost:3000/api/weather", {
    params: { province, city, county },
  });
  renderTable(response.data.data.forecast_24h);
}

// 默认渲染
onMounted(async () => {
  const provinceDataList = await fetchDistrictData("");
  renderOption(provinceDataList, provinceData);
  getWeather("湖北省", "武汉市", "青山区");
});

// 渲染省列表
function fetchProvinceData() {
  fetchDistrictData("").then((data) => {
    renderOption(data, provinceData);
  });
}

// 渲染市列表
function fetchCityData() {
  cityData.value = [];
  fetchDistrictData(selectedProvince.value).then((data) => {
    renderOption(data, cityData);
  });
}

// 渲染区列表
function fetchAreaData() {
  areaData.value = [];
  fetchDistrictData(selectedCity.value).then((data) => {
    renderOption(data, areaData);
  });
}
</script>

<style></style>
